<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // function loadImg(src) {

        //     // 这是pending状态

        //     // 1.返回一个匿名的Promise类的实例
        //     const p = new Promise(
        //         // 2.传入一个函数，内部有两个形参分别为resolve和reject，这两个形参同样也是函数
        //         (resolve, reject) => {
        //             //3. 先定义一张图片,创建一个element
        //             const img = document.createElement('img')
        //             //4. 加载完之后传入一个回调函数
        //             img.onload = () => {
        //                 //5.通过resolve方法将要加载的对象传进来
        //                 resolve(img) 

        // resolved
        // 成功了

        //             }
        //             //5.当遇到问题，就执行reject这个函数
        //             img.onerror = () => {
        //                 //6. 失败的话就传入一个模板字符串,把错误信息传递出去
        //                 const err = new Error(`图片加载失败${src}`);
        //                 reject(err); 

        // rejected
        // 失败了

        //             }
        //             img.src = src;
        //         }
        //     )
        //     return p
        // }

        const p1 = new Promise((resolve, reject) => {

        })
        // 在这里只定义了一个Promise实例，然后在形参位置传入两个函数形式的参数，
        console.log('p1', p1); // Promise {<pending>} [[PromiseStatu]]: "pending" 即pending状态
        // 因为resolve和reject

        const p2 = new Promise((resolve, reject) => {
            // 在p2 中模拟一个异步setTimeout
            setTimeout(() => {
                resolve()
            });
        })
        // 在p2实例中有一个异步的定时器，依旧是pending，因为打印的时候p2内部的内容还没有执行
        console.log('p2', p2); //Promise {<pending>} [[PromiseStatus]]: "resolved"
        setTimeout(() => console.log('p2-setTimeout', p2)); // 在这里就变为了resolved

        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject()
            });
        })
        console.log('p3', p3); // Promise {<pending>} [[PromiseStatus]]: "rejected"
        setTimeout(() => console.log('p2-setTimeout', p2)); // 在这里就变为了rejected

        // 另一种方式实现
        const status1 = Promise.resolve(100);
        // console.log('status1', status1); // Promise {<resolved>: 100}
        status1.then(data => console.log('data', data)
            // 这里有结果，证明resolve状态可以触发then的回调
            // data:100
        ).catch(err => console.log('err', err)
            // 这里并没有触发catch
        )

        const status2 = Promise.reject('err')
        // console.log('status2', status2); // Promise {<rejected>: "err"}
        status2.then(data => console.log('data', data)
        ).catch(err => console.log('err', err))
    // 这里有结果，证明reject状态可以触发catch的回调
    // err err
    </script>
</body>

</html>